<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="wrap">
        <div class="title">学生系统</div>
        <div id="form">
            <p>姓名<input id="username" type="text" value="张三123" /></p>
            <p>年龄<input id="age" type="text" value="21" /></p>
            <p>性别
                <select id="gender">
                    <option>男</option>
                    <option>女</option>
                    <option>你猜</option>
                </select>
            </p>
            <p>
                <input type="button" value="添加" id="addBtn" />
                <input type="button" value="排序" id="sortBtn" />
            </p>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <script>

        // 数据驱动 ，数据优先：关注点放在操作数据上，而不是放在操作dom结构上；

        // 1.获取元素 
        // var usernameEle = document.querySelector("#username");
        // var ageEle = document.querySelector("#age");
        // var genderEle = document.querySelector("#gender");
        // var addBtn = document.querySelector("#addBtn");
        // var tbodyEle = document.querySelector("tbody");
        // 立刻获取了input里的值 ，放在username变量里存起来了 ，后面就不会改变了；
        // var username = usernameEle.value;

        // console.log(username);
        // 点击添加的时候获取 学生的信息；
        // addBtn.onclick = function(){
        //     var username = usernameEle.value;
        //     var age = ageEle.value;
        //     var gender = genderEle.value;
        //     // console.log(username,age,gender);
        //     // 模板字符串 可以支持换行；
        //     // var str = "<div>"+
        //     //                 "<span>1</span>"+
        //     //                 "<span>2</span>"+
        //     //           "</div>";
        //     tbodyEle.innerHTML += `<tr>
        //                                 <td>${username}</td>
        //                                 <td>${age}</td>
        //                                 <td>${gender}</td>
        //                                 <td><button>删除</button></td>
        //                           </tr>`;

        // //    获取删除按钮，一定是在删除按钮生成之后；
        //     addDeleEvent();
        // }

        // function addDeleEvent(){
        //     var btns = document.querySelectorAll("td button");
        //     btns.forEach(function(btn){
        //         btn.onclick = function(){
        //             // console.log("点击了删除按钮")
        //             this.parentNode.parentNode.remove();
        //         }
        //     })
        // }



        // 数据驱动；把学生抽象成数据 ，然后通过数据来渲染视图；
        // var arr = [{
        //     name:"张三",
        //     age:20,
        //     gender:"男"
        // },{
        //     name:"李四",
        //     age:22,
        //     gender:"男"
        // },{
        //     name:"王五",
        //     age:21,
        //     gender:"女"
        // }];
        // document.onclick = function(){
        //     renderDom(arr);
        // }
        var usernameEle = document.querySelector("#username");
        var ageEle = document.querySelector("#age");
        var genderEle = document.querySelector("#gender");
        var addBtn = document.querySelector("#addBtn");
        var tbodyEle = document.querySelector("tbody");
        var sortEle = document.querySelector("#sortBtn");
        var arr = [];
        addBtn.onclick = function () {
            var username = usernameEle.value;
            var age = ageEle.value;
            var gender = genderEle.value;
            var obj = {
                name: username,
                age: age,
                gender: gender
            }
            // console.log(obj)
            arr.push(obj);
            // console.log(arr);
            renderDom(arr);
        }
        // 点击排序的时候 
        sortEle.onclick = function () {
            // console.log(arr)
            arr.sort(function (a, b) {
                return a.age - b.age;
            })
            console.log(arr);
            renderDom(arr);
        }


        // 定义一个函数 ；这个函数会根据数据来改变页面里的内容；
        function renderDom(arr) {
            tbodyEle.innerHTML = "";
            arr.forEach(function (item,key) {
                var tr = document.createElement("tr");
                tr.innerHTML = `<td>${item.name}</td>
                                <td>${item.age}</td>
                                <td>${item.gender}</td>
                                <td><button>删除</button></td>`;
                tbodyEle.appendChild(tr);
                var delEle = tr.querySelector("button");
                delEle.onclick = function () {
                    // console.log("点击了删除");
                    // 先删除数据,然后再改变视图；
                    arr.splice(key,1);
                    // console.log(arr);
                    renderDom(arr);
                    // console.log(key);
                }
            })

        }

    </script>
</body>

</html>